<template>
  <view class="animated fadeIn faster page-bg">
    <NoticeBar :notices="notices"/>

    <view class="mx-2 mt-2 py-1 bg-fff category d-flex  d-flex-middle d-flex-wrap rounded20">
      <view v-for="(item,inde) in categoryList" :key="inde+'c'" style="width: 140rpx"
            @click="clickCategory(item,inde)" class="d-flex-column d-flex-middle my-1">
        <view class="cate rounded20" :class="{'cateActive':categoryIndex == inde}">
          <image :src="item.icon" class="rounded20 cateImg"></image>
        </view>
        <text class="font24 mt-1">{{ item.name }}</text>
      </view>
      <view style="width: 20%" class="d-flex-column d-flex-middle my-1" @click="openCate">
        <view class="iconfont icon-a-fenleipinlei font80 color598dfc"></view>
        <text class="font24 mt-1 ">更多品类</text>
      </view>
    </view>

    <view class="mx-2 my-2 d-flex bg-fff grabClass rounded10">
      <picker @change="grabLoginPickerChange" @click="getType(0)" :class="{'grabClassActive':seleIndex == 0}"
              :value="grabLoginIndex" :range="grabLogin" range-key="name" class="d-flex-item">
        <view class="p-1 d-flex-item text-center">
          <text class="iconfont icon-shaixuan main-color mr-1"></text>
          登录方式
        </view>
      </picker>
      <picker @change="grabPickerChange" @click="getType(1)" :class="{'grabClassActive':seleIndex == 1}"
              :value="grabIndex" :range="grab" range-key="name" class="d-flex-item">
        <view class="p-1 d-flex-item text-center">
          <text class="iconfont icon-shaixuan main-color mr-1"></text>
          游戏类型
        </view>
      </picker>
      <picker @change="typePickerChange" @click="getType(2)" :class="{'grabClassActive':seleIndex == 2}"
              :value="typeIndex" :range="listType" range-key="name" class="d-flex-item">
        <view class="p-1 d-flex-item text-center">
          <text class="iconfont icon-shaixuan main-color mr-1"></text>
          抢单类型
        </view>
      </picker>
    </view>

    <view class="mx-2 my-2 grabList">
      <view v-for="(item,inde) in grabList" :key="inde+'c'" class="p-2 bg-fff mb-2 list rounded20">
        <view class="d-flex d-flex-middle">
          <image :src="item.escort_icon" class="mr-2 img "></image>
          <view class="d-flex-item">
			<view class="d-flex d-flex-between d-flex-middle">
			  <text class="font-bold font30 text-clamp mb-1 d-flex-4">{{ item.escort_name }}</text>
			  <text class="color444 mb-1 d-flex-item text-right">{{ item.escort_type_text }}</text>
			</view>
            <view class="mb-1 d-flex d-flex-between d-flex-middle">
              <text class="colorf00 font32 mr-2">￥{{ item.amount }}元</text>
              <view>
                <text class="color999 mr-2">{{ mapDdata(item.game_type, grab) }}</text>
                <text class="color999 mb-1">{{ mapDdata(item.game_login_type, grabLogin) }}</text>
              </view>
            </view>
            <view class="d-flex d-flex-between d-flex-middle">
              <text class="color444">{{ item.created_at }}</text>
            </view>
          </view>
        </view>
        <view class="d-flex d-flex-middle d-flex-between mt-2">
          <view class="d-flex d-flex-2 font26">
            <text class="colorprice color999 font24  d-flex-4" :class="{'text-clamp-two':isExpanded != inde}">{{ item.remark }}</text>
            <text class="d-flex-item" @click="toggleExpand(inde)" v-if="item.remark.length>30">展开<text class="iconfont icon-arrow-bottom-small"></text></text>
          </view>
          <view class="ml-4 text-center d-flex-item bgcolor598dfc px-3 py-1 rounded30 colorfff font22"
                @click="goUrl('/subPages/orderList/orderList?order_type=2&player_order_status=',item.order_no)">
            我要抢单
          </view>
        </view>
      </view>
    </view>


    <view class="load-more d-flex d-flex-center d-flex-column d-flex-middle">
      <image class="mb-2" v-if="loadingType == 2 && grabList.length == 0"
             src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/formal/images/empty.png"
             style="width: 198rpx;height: 128rpx;margin-top: 260rpx;"></image>
      <text>{{ loadingType === 0 ? '上拉显示更多' : (loadingType === 1 ? '正在加载...' : '~ 没有更多数据了 ~') }}</text>
    </view>


    <uni-popup ref="catePopup" :safe-area="false" @touchmove.stop.prevent="moveHandle" type="bottom"
               style="position: relative;z-index: 999991;">
      <view class="wrap">
        <view class="py-3 d-flex d-flex-between d-flex-middle mb-3">
          <view style="width: 150rpx;"></view>
          <text class="font30 color000">游戏分类</text>
          <view class="d-flex d-flex-middle d-flex-end pr-3" style="width: 120rpx;">
            <text class="iconfont icon-cuo font30 color999" @click="closeCate"></text>
          </view>
        </view>
        <view class="pb-2 px-1">
          <scroll-view style="height: 500rpx;" scroll-y="true" enableBackToTop="true" :scroll-top="0"
                       scroll-with-animation>
            <view class="row">
              <view class="span-4 d-flex d-flex-column d-flex-middle d-flex-center mb-3"
                    v-for="(cate,index) in allCategory" :key="cate.id" :class="{'cate-on':cateIndex==index}"
                    @click="setCate(index,cate.id)">
                <image :src="cate.icon" class="mb-1 cate-img"></image>
                <text class="font24">{{ cate.name }}</text>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </uni-popup>


  </view>
</template>

<script>
import NoticeBar from '@/components/notice-bar/index.vue'
import {
  homeApi
} from '@/http/homeApi.js';
import {
  fileApi
} from '@/http/fileApi.js';

import {
  mapState
} from "vuex"

export default {
  components: {
    NoticeBar
  },
  data() {
    return {
      notices: [],
      search: '',
      categoryList: [],
      grabLogin: [{
        type: 1,
        name: '微信'
      }, {
        type: 2,
        name: 'QQ'
      },
        {
          type: 3,
          name: '其他'
        }],
      grabLoginIndex: '',
      grab: [{
        type: 1,
        name: '端游'
      }, {
        type: 2,
        name: '手游'
      }],
      grabIndex: 0,
      listType: [],
      typeIndex: 0,
      seleIndex: -1,
      categoryIndex: -1,
      grabList: [],
      loadingType: 1,
      page: 1,
      type: '',
      game_type: '',
      game_login_type: '',
      allCategory: [],
      cateIndex: -1,
      isExpanded: -1
    }
  },
  onLoad() {
    this.SwiperBanner();
    this.categories();
    this.carryList()
    this.carryType()
  },
  computed: {
    ...mapState({
      loginState: state => state.loginState,
      real_name: state => state.real_name,
      id_card: state => state.id_card,
    })
  },
  methods: {
    mapDdata(e, data) {
      let name = ""
      data.map((item) => {
        if (item.type == e) {
          name = item.name
        }
      })
      return name
    },
    async SwiperBanner() {
      let res1 = await homeApi.getBanner('4')
      this.notices = res1
    },
    async categories() {
      let res = await homeApi.getMyGame()
      this.categoryList = res
    },
    async carryType() {
      let res = await homeApi.getCarryType()
      this.listType = res
    },
    goUrl(urlPages, id) {
      if (!this.loginState) {
        uni.showToast({
          title: '未登录，请先登录！',
          icon: 'none'
        })
        setTimeout(() => {
          uni.navigateTo({
            url: '/subPages/login/login'
          })
        }, 1500)
      } else {
        if (!id) {
          console.log('55555')
          uni.navigateTo({
            url: urlPages
          })
        } else {
          let params = {
            order_no: id
          }
          fileApi.carryOrder(params).then((res) => {
            setTimeout(() => {
              uni.navigateTo({
                url: urlPages
              })
            }, 1500)
          }).catch((err) => {
            if (err.code == 1002) {
              setTimeout(() => {
                uni.navigateTo({
                  url: '/subPages/marginDeposit/marginDeposit'
                })
              }, 1500)
            }
          })
        }
      }
    },
    getType(e) {
      this.seleIndex = e;
    },
    clickCategory(e, index) {
      this.categoryIndex = index
      this.cateIndex = -1
      this.grabList = [];
      this.page = 1;
      this.carryList(e.id)
    },
    typePickerChange(e) {
      this.typeIndex = e.detail.value
      this.type = this.listType[this.typeIndex].id;
      this.grabList = [];
      this.page = 1;
      this.carryList()
    },
    grabPickerChange(e) {
      this.grabIndex = e.detail.value
      this.game_type = this.listType[this.grabIndex].id;
      this.grabList = [];
      this.page = 1;
      this.carryList()
    },
    grabLoginPickerChange(e) {
      this.grabLoginIndex = e.detail.value
      this.game_login_type = this.listType[this.grabLoginIndex].id;
      this.grabList = [];
      this.page = 1;
      this.carryList()
    },
    async carryList(id) {
      if (!id) id = ''
      let that = this
      that.loadingType = 1
      try {
        let params = {
          game_type: that.game_type,
          game_login_type: that.game_login_type,
          page: that.page,
          game_id: id,
          escort_type_id: that.type
        }
        let result = await fileApi.getCarryList(params)
        if (result.data) {
          that.grabList = that.grabList.concat(result.data)
        }
        if (result.data && result.data.length > 9) {
          that.loadingType = 0
        } else {
          that.loadingType = 2
        }
      } catch (error) {
        that.loadingType = 2
      }
    },
    openCate() {
      if (this.allCategory.length == 0) {
        this.getAllCate()
      }
      this.$refs.catePopup.open()
    },
    closeCate() {
      this.$refs.catePopup.close()
    },
    getAllCate() {
      let that = this
      uni.showLoading({
        title: '加载中...'
      })
      homeApi.getAllCategory().then((res) => {
        uni.hideLoading()
        that.allCategory = res
      }).catch((err) => {
        uni.hideLoading()
        console.log('err', err)
      })
    },
    setCate(index, id) {
      let that = this
      that.categoryIndex = -1
      that.cateIndex = index
      that.page = 1;
      that.$refs.catePopup.close()
      this.grabList = [];
      this.carryList(id)
    },
    toggleExpand(e) {
      if (this.isExpanded == e) {
        this.isExpanded = -1
      }else {
        this.isExpanded = e
      }
    }
  }
}
</script>


<style scoped>
.font80 {
  font-size: 80rpx;
}

.searchBox {
  position: relative;

}

.searchBox input {
  height: 56rpx;
  line-height: 56rpx;
}

.searchBox text {
  position: absolute;
  left: 13rpx;
  top: 12rpx;
}

.color598dfc {
  color: #598dfc;
}

.bgcolor598dfc {
  background-color: #598dfc;
}

.avatar {
  padding-top: 22rpx;
  padding-bottom: 22rpx;
  padding-left: 30rpx;
  padding-right: 25rpx;

}

.callinfo {
  height: 144rpx;
  padding-right: 30rpx;
  border-bottom: solid 1px #ececec;
}

.flex-1-8 {
  flex: 1.8
}

.category {
  background: rgba(255, 255, 255, .3);
}

.px-0-5 {
  padding-left: 6rpx;
  padding-right: 20rpx;
}

.colorff7f02 {
  color: #ff7f02;
}

.grabClass {
  overflow: hidden;
}

.grabClass view:nth-child(1),
.grabClass view:nth-child(2) {
  border-right: 2rpx solid #f4f6fa;
}

.grabClassActive {
  background-color: #598dfc;
  color: #fff;
}


.grabList .img {
  width: 120rpx;
  height: 120rpx;
  border-radius: 100%;
}



.d-flex-2 {
  flex: 3;
}

.d-flex-4 {
  flex: 4;
}

.cateActive {
  background: #aec8ff;
}

.cate {
  width: 84rpx;
  height: 84rpx;
  overflow: hidden;
  border: 8rpx solid transparent;
}

.cateImg {
  width: 84rpx;
  height: 84rpx;
}

.cate-on {
  color: #598dfc;
}

.cate-img {
  width: 80rpx;
  height: 80rpx;
  border-radius: 20rpx;
  border: solid 2px #ffffff;
}

.cate-on .cate-img {
  border: solid 2px #598dfc;
}


</style>